<template>
	<div>
		<el-row class="container">
			<el-col :span="24" class="header">
				<!--logo-->
				<el-col :span="4" class="logo">
				<!--{{collapsed?'':sysName}}-->
				    <img src="@/assets/img/2017111612045280515.jpg" alt="logo" class="logo-img"/>
				    <p class="logo-title">深圳市中永物流公司</p>
			    </el-col>
			    <!--middle-->
			    <el-col :span="9" class="nav-box">
					<!--<div class="tools">
						<i class="item-icon iconfont my-icon-liebiao"></i>
					</div>-->
					<!--更新日志-->
					<div class="header-nav">
						<i class="iconfont nav-icon my-icon-icobanbengengxin"></i>
						<span>更新日志</span>
					</div>
					<div class="header-nav">
						<i class="iconfont nav-icon my-icon-xiaoxi"></i>
						<span>消息通知</span>
					</div>
					<div class="header-nav ">
						<i class="iconfont nav-icon my-icon-kefu"></i>
						<span>在线客服</span>
					</div>
				</el-col>
				<!--search-->
				<el-col :span="10" class="userinfo">
					<span class="search">
						<div class="searcg-box">
							<span class="search-widget">
								<el-dropdown trigger="hover">
									<span>ERP/WMS单号</span><i class="iconfont down-icon my-icon-xiangxia"></i>
									<el-dropdown-menu slot="dropdown">
									    <el-dropdown-item>ERP/WMS单号</el-dropdown-item>
										<el-dropdown-item>订单号</el-dropdown-item>
										<el-dropdown-item>运单号</el-dropdown-item>
						            </el-dropdown-menu>
								</el-dropdown>
							</span>
							<input id="searchName" name="searchName" autocomplete="off" placeholder="请输入对应单号查询" type="text">
						</div>
					</span>
					<el-dropdown trigger="hover">
						<span class="el-dropdown-link userinfo-inner">
							<span class="username">{{this.user}}<i class="iconfont down-icon my-icon-xiangxia"></i></span><i class="iconfont portrait my-icon-bhjmianbushibie"></i> 
						</span>
						<el-dropdown-menu slot="dropdown">
							<!--<el-dropdown-item>我的消息</el-dropdown-item>-->
							<el-dropdown-item>修改密码</el-dropdown-item>
							<router-link to="/login" @click="quit">
								<el-dropdown-item>
									退出登录
								</el-dropdown-item>
							</router-link>
						</el-dropdown-menu>
					</el-dropdown>
				</el-col>
			</el-col>
			
			<!--侧边栏-->
			
		</el-row>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data(){
			return {
//				user:""
			}
		},
		methods:{
			quit(){
//			   this.axios.post('http://192.168.0.101:5050/loginNo/',)
			}
		},
		computed:{
//           getUser(){
//           	this.user = "中永物流"
//           	try{
//           	  if(sessionStorage.user){
//           		this.user = JSON.parse(decodeURI(sessionStorage.user))
//           	   }
//           	}catch(e){}
//           	return this.user
//           }
            ...mapState(['user'])
		}
	}
</script>

<style scoped>
.container {
	width: 100%;
    position: fixed;
}
.container .header{
		line-height:1.2rem;
		background: #20a0ff;
		color:#fff;
		display: flex;
		height:1.2rem;
     }
.container .header .logo{
     	 width:auto;
     	 line-height:1.2rem;
		 font-size: 0.44rem;
		 padding:0 0.4rem;
		 border-color: #ccc;
		 border-right-width: 1px;
		 border-right-style: solid;
		 background:#fff;
		 overflow: hidden;
	}
.container .header .logo .logo-img{
		width: 0.8rem;
		margin-top:0.18rem;
		float:left;
	}
.container .header .logo .logo-title{
	 	color:#ccc;
	 	font-size:0.3rem;
	 	float:left;
	 	font-weight: bold;
	 	padding-left:.2rem;
	 }
.nav-box{
	 	display: flex;
	 	overflow: hidden;
	 	flex:1;
	 	line-height:1.2rem;
	 }
.container .header .tools{
		padding-left:0.46rem;
		cursor: pointer;
		flex:1;
		overflow: hidden;
		height:1.2rem;
	}
.container .header .tools .item-icon{
		font-size:0.52rem;
	}
.container .header .header-nav{
    	 flex:1;
    	 height:1.2rem;
    	 line-height:1.2rem;
    	 overflow: hidden;
    	 display: flex;
    	 cursor:pointer;
    	 justify-content:center;
    }
.nav-icon{
    	font-size:0.4rem;
    }
.container .header .header-nav span{
    	display: inline-block;
    	padding:0 .2rem;
    }
.container .header .userinfo{
	padding-right: 0.7rem;
	height: 1.2rem;
	display: flex;
} 
.container .header .userinfo .userinfo-inner{
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
 
}
.el-dropdown{
	display: flex; 
	flex:1; 
	justify-content: flex-end;
	}
.container .header .userinfo .userinfo-inner .username{
	font-size:18px;
	font-weight: 400;
	display: flex;
	flex: 1;
	height:1.2rem;
	min-width: 1.04rem;
	padding:0 .1rem;
}
.container .header .userinfo .userinfo-inner .username .down-icon{
	margin-left:.2rem;
}
.container .header .userinfo .userinfo-inner .portrait{
	display: inline-block;
	width:1rem;
	/*background:blue;*/
	border-radius: 50%;
	margin-left:0.4rem;
	font-size:40px;
	text-align: center;
	line-height: 1rem;
}
.userinfo .search{
	display: flex;
	flex:1;
	align-items: center;
	position:relative;
	justify-content: center;
	height:
}
.userinfo .search .search-widget{
	z-index: 1000;
	margin:0 .2rem;
	min-width: 2.4rem;
}
.userinfo .search .searcg-box{
	display: flex;
	background-color: #fff;
    border: 1px solid #d8e3ef;
    border-radius: 0.3rem;
    -webkit-border-radius: 0.3rem;
    -moz-border-radius: 0.3rem;
    float:left;
    justify-content: space-around;
    overflow: hidden;
    line-height: 0.8rem;
    height:0.8rem;
}
#searchName {
    display: inline-block;
    outline: none;
    font-size: 0.28rem;
    color: #666;
    z-index: 17;
    box-sizing: content-box;
    padding-right:.2rem;
}
</style>